网页上如果有数字需要经常变动，又想让它比较明显，肯定是加个动画比较显眼，利用jquery的animate可以很容易的实现，不需要css3，因此可以兼容低版本的ie浏览器。
代码比较简单，没有整理成插件形式，暂时全堆在html里了。直接上代码：
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title>演示</title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.7.1.min.js"></script> <style> .digits{ display:inline-block; height:30px; margin-right:50px; } .digits i{ background:url(numbers.png) no-repeat; display:inline-block; float:left; height:30px; width:18px; } .digits b{ background:url(numbers.png) no-repeat 0 -398px; display:inline-block; float:left; height:30px; width:10px; } </style> <script> function setNumber(dom, number){ var n = String(number),len = n.length; //如果新的数字短于当前的，要移除多余的i if(dom.find("i").length > len){ dom.find("i:gt(" + (len - 1) + ")").remove(); } //移除千分位分隔符 dom.find("b").remove(); //开始填充每一位 for(var i=0;i<len;++i){ //位数不足要补 if(dom.find("i").length < len){ dom.append("<i></i>"); } var obj = dom.find("i").eq(i); var y = -40 * parseInt(n.charAt(i), 10); //加分隔符 if(i < len - 1 && (len - i - 1) % 3 == 0) $("<b></b>").insertAfter(obj); //利用动画变换数字 obj.animate({ backgroundPositionY:y+"px" }, 350); } }; $(function(){ //测试，每秒更新随机数 window.setInterval(function(){ setNumber($("#a"), Math.floor(Math.random() * 1000000)); setNumber($("#b"), Math.floor(Math.random() * 1000000)); }, 1000); });</script></head><body> <div id="a" class="digits"></div> <div id="b" class="digits"></div></body></html>代码与资源放在附件里了。
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦